<template>
    <div class="zhangzi-page">
        <!-- 左侧内容 -->
        <div class="page-left page-zbox">
            <!-- 智能识别次数 -->
            <recognitionFrequency />
            <!-- 物联网发现次数 -->
            <discoveriesNumber />
            <!-- 智能视频分析 -->
            <videoAnalysis />
        </div>
        <!-- 右侧内容 -->
        <div class="page-right">
            <!-- 实时上报次数 -->
            <reportsNumber />
            <!-- 智能化流转数据展示 -->
            <transferData />
            <!-- 案件数量对比分析 -->
            <comparativeAnalysis />
            <!-- 时间维度对比分析 -->
            <timeDimension />
            <!-- 在线设备和离线设备  -->
            <div class="device">
                <div class="up">
                    <div class="icon">
                        <img src="../../../assets/images/zhangzi/tongji/zaixian.png" alt="">
                    </div>
                    <div class="title">在线设备</div>
                </div>
                <div class="down">
                    <div class="icon">
                        <img src="../../../assets/images/zhangzi/tongji/lixian.png" alt="">
                    </div>
                    <div class="title">离线设备</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import recognitionFrequency from './components/recognitionFrequency'
import discoveriesNumber from './components/discoveriesNumber'
import videoAnalysis from './components/videoAnalysis'
import reportsNumber from './components/reportsNumber'
import transferData from './components/transferData'
import comparativeAnalysis from './components/comparativeAnalysis'
import timeDimension from './components/timeDimension'
export default {
    components: { recognitionFrequency, discoveriesNumber, videoAnalysis, reportsNumber, transferData, comparativeAnalysis, timeDimension },
}
</script>

<style lang="less" scoped>
.page-right {
    >div {
        width: 100%;
        padding: 2.1rem 1.6rem 1.6rem 2.1rem;
        background: url('../../../assets/images/zhangzi/home/biankuang.png') no-repeat;
        background-size: 100% 100%;
    }

    .device {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 14.8rem;
        height: 13.3rem;
        background: url('../../../assets/images/zhangzi/home/chili-bg.png') no-repeat;
        background-size: 100% 100%;
        position: fixed;
        bottom: 11rem;
        right: 58rem;
        padding: 0;


        .up,
        .down {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 2.6rem;
            margin-bottom: 1.5rem;

            .icon {
                width: 2rem;
                height: 2.6rem;
                margin-right: 1rem;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .title {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 2.1rem;
                font-size: 2.2rem;
                font-family: Adobe Heiti Std;
                color: #FFFFFF;
            }
        }

        .down {
            margin-bottom: 0;
        }
    }
}
</style>